<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HomeAway Web Directory</title>
    </head>

    <%= stylesheet_link_tag "tablesorter.css",
                            "default.css",
                            "jqModal.css",
                            "modal.css",
                            "meeting_room.css",
                            "tabs.css"
    %>

    <style media="screen" type="text/css">
        .defaultText
        {
            width: 300px;
        }
        .defaultTextActive
        {
            color: #a1a1a1;
            font-style: italic;
        }
        
    </style>
	
    <script type="text/javascript" language="javascript">
        // Global VARS
        window.gbl_var = {};
        window.gbl_var.employeeCount = <%= $SYSTEM_WEB_DIR_CONFIG["conf"]["employeeCount"] %>;
        window.gbl_var.roomsCount = <%= $SYSTEM_WEB_DIR_CONFIG["conf"]["roomsCount"] %>;
		
    </script>
    
	<%= javascript_include_tag  "/js/jquery-1.4.2.min.js", 
                                "/js/modalDialogJScript", 
                                "/js/jqModal.js", 
                                "/js/jquery.tablesorter.min.js", 
                                "/js/jquery.autosuggest.js", 
                                #"/js/jquery.tablePagination.0.1.js",
                                #"/js/jquery.columnfilters.js",
                                "/js/jquery.roomcolumnfilter.js", 
                                "/js/jquery.popupWindow.js", 
                                "/js/tabs.js",
                                "/js/jquery.tblPaging.js",
                                "/js/jquery.popupDetails.js",
                                "/js/jquery.exportFormat.js" %>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
	        $("#imgSearch").hide();
	        $("#searchBox").val('');
	        $('table#tblRoomDetails').roomcolumnFilters({ alternateRowClassNames: ['rowa', 'rowb'], excludeColumns: [0, 1, 3] });
	        $(".defaultText").focus(function() {
	            if ($(this).val() == $(this)[0].title) {
	                $(this).removeClass("defaultTextActive");
	                $(this).val("");
	            }
	        });

            /*$(".defaultText").blur(function() {
                if ($(this).val() == "") {
                    $(this).addClass("defaultTextActive");
                    $(this).val($(this)[0].title);
                }
            });

            $(".defaultText").blur();*/
            $("#dialog").jqm(
                {
                    onShow: function(h) {
                        /* callback executed when a trigger click. Show notice */
                        h.w.slideDown("medium");
                    },
                    onHide: function(h) {
                        /* callback executed on window hide. Hide notice, overlay. */
                        h.w.slideUp("medium", function() { if (h.o) h.o.remove(); });
                    }
                }
            );

            $(".jqModal").click(function() {
            });

            $("#modalWindow").jqm(
                {
                    onShow: function(h) {
                        /* callback executed when a trigger click. Show notice */
                        h.w.slideDown("medium");
                    },
                    onHide: function(h) {
                        /* callback executed on window hide. Hide notice, overlay. */
                        h.w.slideUp("medium", function() { if (h.o) h.o.remove(); });
                    }
                }
            );

            $("#modalbox").jqm(
                {
                    onShow: function(h) {
                        /* callback executed when a trigger click. Show notice */
                        h.w.slideDown("medium");
                    },
                    onHide: function(h) {
                        /* callback executed on window hide. Hide notice, overlay. */
                        h.w.slideUp("medium", function() { if (h.o) h.o.remove(); });
                    }
                }
            );


            $("#close_modalbox").click(function() {
                $('#modalbox').jqmHide();
            });

            $("#imgClose").click(function() {
                $('#divUserDetails').fadeOut();
                $("#userName").text("");
            });

            $("#imgRoomClose").click(function() {
                $('#meetingroom_cnt').fadeOut();
                $(".meetingroom_title_font").text("");
            });

            $("#meeting_room").jqm(
                {
                    onShow: function(h) {

                        h.w.slideDown("medium");
                    },
                    onHide: function(h) {

                        h.w.slideUp("medium", function() { if (h.o) h.o.remove(); });
                    }
                }
            );
            $("#close_meeting_room").click(function() {
                $("#meeting_room").jqmHide();
            });
            // ========================== New ==============================
            window.gbl_var.paginator = $("#tblDetails").tblPaging();
            
            window.gbl_var.popup = $().popupDetails({});
            $("#searchBox").wdAutoSuggest();
            $(".exportExcelLink").exportFormat({});
        });    //close $(document).ready
      
         function ShowConferenceRoom(conferenceRoomUrl) {
             window.open(conferenceRoomUrl);
         }
    </script>
    <script type="text/javascript">
        function showPopup(url) {
            newwindow = window.open(url, 'name');
            if (window.focus) {newwindow.focus()}
        }
    </script>

    <body>
        <!-- Search line -->
        <table align="center" style="width:95%;">
            <tr>
                <!--<form id="Search" name="Search" method="post" action="">-->
                    <td align="left">
                        <input type="text" id="searchBox" class="defaultText" title="Type to search" name="searchterm" autocomplete="off"/>
                            &nbsp; 
                        <img id="imgSearch" src="/images/cancel.gif" alt="Cancel Search" title="Cancel Search" style="width:150px;width:14px;height:14px; display:none;" />
                        <div style="clear:both"></div>
                        <div class="aui-dropdown" style="display:none;">
                        </div>
                    </td>
                    <td class="top_links" align="right">
                        <table>
                            <tr>
                                <td align="right" valign="left" width="600"><span>Export:</span>
                                  <%= link_to image_tag("spreadsheet.jpg",  :border => 0, :class => "exp_pos", :align => "absmiddle",
                                    :alt => "Export current result to Spreadsheet", :title => "Export current result to Spreadsheet"),
                                    {:controller => "export", :action => "excel"}, :class => "exportExcelLink" %>
                                    </td>
                            </tr>
                        </table>
                    </td>
                <!--</form>-->
            </tr>
        </table>
        <!-- Search line -->
        
        <!-- container -->
        <div id="tabcontainer">
            <div style="float:left;">
                <ul class="menu">
                    <li id="people" class="active">People</li>
                    <li id="places" class="inactive">Places</li>
                </ul>
            </div>
            <div style="float:right;" id="topPagination">
                <div class='tablePagination' style='float:right;width:195px;'>
                    <table class='span4' style='width:195px;'>
                        <tr><td class='tablePagination_paginater'>
                                <img id='IDTablePagination_prevPage' src='/images/pager/prev_gray.png'/ style="cursor: hand;">
                            </td>
                            <td align='center' class='tablePagination_text' class='legend' style='width:120px; font-weight: bold;'>
                            </td><td>
                                <img id='IDTablePagination_nextPage' src='/images/pager/next_gray.png'/ style="cursor: hand;"></td>
                        </tr>
                   </table>
                </div>
            </div>
            <span class="clear"></span>
            <div class="content people">
                <table id="web_table">
                    <tr height="10">
                        <td>
                        </td>
                    </tr>
                </table>
                <table id="tblDetails" cellspacing="0" class="searchresults tablesorter tbl_margin" width="1040">
                    <thead>
                        <tr>
                            <th width="20px" class="{sorter: false}" style="background-image:none;"></th>
                            <th width="150" style="background-position:40px center;">Name</th>
                            <th width="160" class="" style=""background-position:100px center;">Business Unit<img src="/images/filtered.png" align="absmiddle" border="0" class="filter_icons" title="Click on Business Unit Name to Filter" /></th>
                            <th width="10px" style="background-image:none;padding-left:0px;"><img border="0" align="left" class="clearFilter fltBtnBusinessUnit" src="images/clear_filter.png"/></th>
                            <th width="130" style="background-position: 90px center;">Department<img src="/images/filtered.png" align="absmiddle" border="0" class="filter_icons" title="Click on Department Name to Filter"/></th>
                            <th width="10px" style="background-image:none;padding-left:0px;"><img border="0" align="left" class="clearFilter fltBtnDepartment" src="images/clear_filter.png"/></th>
                            <th width="190" class="" style="background-position: 70px center;">Job Title<img src="images/filtered.png" align="absmiddle" border="0" class="filter_icons" title="Click on Job Title Name to Filter"/></th>
                            <th width="10px" class="{sorter: false}" style="background-image:none;padding-left:0px;"><img border="0" align="left" class="clearFilter fltBtnJobTitle" src="images/clear_filter.png"/></th>
                            <th width="110" style="background-position:75px center;">Location</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Employee -->
                    </tbody>
                </table>
            </div>
            <div style="float:right; clear:both;" id="bottomPagination"></div>
            <div class="content places">
                <table id="tblRoomDetails" cellspacing="0" align="left" class="searchresults tablesorter roomdetails_margins tbl_margin">
                    <thead>
                        <tr>
                            <th width="20">&nbsp;</th>
                            <th width="330">Meeting Room Name</th>
                            <th width="120">Office 
                                <img src="/images/filtered.png" align="absmiddle" border="0" class="filter_icons" title="Click on Office Name to Filter" /></th>
                            <th width="10" style="background-image: none; padding-left: 0px;">
                                <img border="0" align="left" class="clearRoomFilter" alt="Clear Filter" title="Clear Filter"/>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--%= raw writeRoomsCells %-->
                        <%= raw writeRoomsCells %>
                    </tbody>
                </table>
            </div>
            <div id="dialog" style="display:none;"  class="jqmWindow"></div>
            <div id="divToolTip" class="htmltooltip" >
                <span id="tooltipMsg"></span>
            </div>
            <div class="hoverPopup" id="divUserDetails" style="display: none;">
                <div class="fl_lt left_arrow">
                    <img src="images/arrow.jpg" /></div>
                <div id="toolTipComponent" class="fl_lt">
                    <div class="close_bg">
                        <div class="fl_lt title_font">
                            <span id="userName"></span><span style="margin-left: 10px;"><a id="aVcf">
                                <img src="images/mac.jpg" border="0" class="exp_pos" align="absmiddle" alt="Export current result to Mac/Linux .VCF"
                                    title="Export current result to Mac/Linux .VCF" /></a></span>
                        </div>
                        <div class="fl_rt">
                            <img id="imgClose" src="images/close.png" class="cur_point close_pos" alt="Close"
                                title="Close" />
                        </div>
                    </div>
                    <div class="clear_props">
                    </div>
            
                    <div style="padding-left:5px;margin-top:5px;">
                        <div class="left_float">
                            <img src="images/top-lt.png" /></div>
                        <div class="left_float userdetails_bg_top">
                            &nbsp;</div>
                        <div class="ie_lt_float">
                            <img src="images/top-rt.png" /></div>
                    </div>
                
                    <div id="preloader" class="clear_props loaderimg fl_lt userdetails_loaderbg">
                        <div class="userdetails_loader_position">Loading...<span class="loader_margin"><img src="images/loader.gif" align="absmiddle" /></span></div>
                    </div>
                    <div id="divContent" style="display: none;" class="userdetails_bg">
                        <div class="fl_lt person_photo" id="person_photo">
                            <img title="" alt="" src="" class="userLogo logo" id="empImage" />
                            <input type="hidden" id="HiddenEmpNumber" />
                            <input type="hidden" id="HiddenSkype" />
                        </div>
                        <div class="fl_lt person_details" id="person_details">
                            <table cellpadding="0" cellspacing="0" id="tab_person_details" border="0" width="100%">
                                <tr>
                                    <td class="popup_labels">
                                        Name:
                                    </td>
                                    <td id="tdName" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Title:
                                    </td>
                                    <td id="tdTitle" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Company:
                                    </td>
                                    <td id="tdCompany" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Department:
                                    </td>
                                    <td id="tdDepartment" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Email:
                                    </td>
                                    <td id="tdEmail" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Office Phone:
                                    </td>
                                    <td id="tdPhone" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Mobile:
                                    </td>
                                    <td id="tdMobile" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Address:
                                    </td>
                                    <td id="tdAddress" class="popup_values">
                                        </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Cube Location:
                                    </td>
                                    <td id="tdCubeLocation" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Manager:
                                    </td>
                                    <td id="tdManager" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Skype:
                                    </td>
                                    <td id="tdSkype" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td class="popup_values" id="tdSkypeChat">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="popup_labels">
                                        Wiki Space:
                                    </td>
                                    <td id="tdWikiPage" class="popup_values">
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;
                                    </td>
                                </tr>
                                <tr id="trLocation">
                                    <td class="popup_labels" style="padding-top: 0px;">
                                        View Location:
                                    </td>
                                    <td class="popup_values" style="padding-top: 0px;">
                                        <ul style="list-style-type: none; margin: 0px; padding: 0px;">
                                            <li><a id="lnkLocation" href="#" style="border-width: 0px; display: inline;" target="_blank">
                                                Employee</a></li>
                                            <li id="liSeperator">|</li>
                                            <li><a id="lnkRoom" href="#" style="border-width: 0px; display: inline;">Meeting Room</a></li>
                                        </ul>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="fl_lt map_location" id="map_location">
                            <iframe id="gmapFrame" width="350" height="300" frameborder="0" scrolling="no" marginheight="0"
                                marginwidth="0"></iframe>
                        </div>
                        <div class="clear_props">
                        </div>
                        <div style="text-align: center">
                            To modify your personal information, please contact HR.
                        </div>
                    </div>
                    <div style="padding-left:5px;margin-bottom:5px;">
                        <div class="left_float">
                            <img src="images/bottom-lt.png" /></div>
                         <div class="left_float userdetails_bg_bottom">
                            &nbsp;</div>
                         <div class="ie_left_float">
                            <img src="images/bottom-rt.png" /></div>
                    </div>
                </div>
            </div>
            <div id="meeting_room" class="left_float hidden_field">
                <div class="bg_close">
                    <div class="right_float">
                        <img src="images/close.png" class="pointer_cur pos_close" alt="Close" title="Close"
                            id="close_meeting_room" /></div>
                </div>
                <div class="props_clear">
                </div>
                <div class="container">
                    <form id="modify" name="modify" method="post" action="#">
                        <div class="form_container">
                            <div>
                                <div class="left_float">
                                    <img src="images/top-lt.png" /></div>
                                <div class="left_float bg_top">
                                    &nbsp;</div>
                                <div class="ie_lt_float">
                                    <img src="images/top-rt.png" /></div>
                            </div>
                            <div class="table_container">
                                <iframe  scrolling="no" frameborder="0" id="frameRoom"
                                    class="frame_bg" style="width:460px;height:260px;"></iframe>
                            </div>
                            <div>
                                <div class="left_float">
                                    <img src="images/bottom-lt.png" /></div>
                                <div class="left_float bg_bottom">
                                    &nbsp;</div>
                                <div class="ie_left_float">
                                    <img src="images/bottom-rt.png" /></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="meetingroom_float_lt" id="meetingroom_cnt">
                <div class="meetingroom_float_lt meetingroom_left_arrow">
                    <img src="images/arrow.jpg" /></div>
                <div id="meetingroom_toolTipComponent" class="meetingroom_float_lt">
                    <div class="meetingroom_close_bg meetingroom_float_lt">
                        <div class="meetingroom_float_lt meetingroom_title_font"></div>
                        <div id="meetingroom_closepopup" class="meetingroom_float_rt">
                            <img id="imgRoomClose" src="images/close.png" class="meetingroom_cur_point meetingrooom_close_pos"
                            alt="Close" title="Close" /></div>
                    </div>
                    <div class="meetingroom_clear_props">
                    </div>
            
                    <div class="meetingroom_clear_props">
                    </div>
                    <div style="padding-left:5px;margin-top:5px;">
                        <div class="left_float">
                            <img src="images/top-lt.png" /></div>
                        <div class="left_float meetingroom_bg_top">
                            &nbsp;</div>
                        <div class="ie_lt_float">
                            <img src="images/top-rt.png" /></div>
                    </div>
                    <div id="meetingroom_preloader" class="meetingroom_loaderimg meetingroom_float_lt meetingroom_loaderbg">
                        <div class="meetingroom_loader_position">Loading...<span class="meetingroom_loader_margin"><img src="images/loader.gif" align="absmiddle" /></span></div></div>
                    <div class="meetingroom_details meetingroom_bg" id="meetingroom_details">
                    <table cellpadding="0" cellspacing="0" id="meetingroom_tab_details" border="0" width="100%">
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Office:
                            </td>
                            <td id="tdRoomOffice" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Phone:
                            </td>
                            <td id="tdRoomPhone" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Office Location:
                            </td>
                            <td id="tdRoomOfficeLoc" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Conference Bridge:
                            </td>
                            <td id="tdRoomConfBridge" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td  class="meetingroom_popup_labels">
                                PIN:
                            </td>
                            <td id="tdRoomPin" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Number of Seats:
                            </td>
                            <td id="tdRoomSeats" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Resources:
                            </td>
                            <td id="tdRoomResources" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="meetingroom_popup_labels">
                                Internal Dial:
                            </td>
                            <td id="tdRoomIntDial" class="meetingroom_popup_values">
                                <label>
                                    &nbsp;</label>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="meetingroom_clear_props">
            </div>
            <div style="padding-left:5px;margin-bottom:5px;">
                <div class="left_float">
                    <img src="images/bottom-lt.png" /></div>
                <div class="left_float meetingroom_bg_bottom">
                    &nbsp;</div>
                <div class="ie_left_float">
                    <img src="images/bottom-rt.png" /></div>
            </div>
        </div>
        </div>
        
        </div>
        <!-- container -->
        
        <!-- footer -->
        <div id="web_tbl">
            <div id="modalbox" class="modalClass" style="display: none;">
                <div class="modalbox_close_bg">
                    <div class="fl_lt modalbox_title_font">
                    </div>
                    <div class="fl_lt" style="margin-left: 10px; margin-top: 5px;">
                        <a id="aModalVcf">
                            <img src="images/mac.jpg" border="0" class="exp_pos" align="absmiddle" alt="Export current result to Mac/Linux .VCF" title="Export current result to Mac/Linux .VCF" />
                        </a>
                    </div>
                    <div class="fl_rt">
                        <img src="images/close.png" class="modalbox_cur_point modalbox_close_pos" alt="Close" title="Close" id="close_modalbox" />
                    </div>
                </div>
                <div class="clear_props">
                </div>
                <div class="modalbox_cnt">
                    <iframe id="frameUserDetails" src="" class="user_data" frameborder="0" scrolling="auto">
                    </iframe>
                </div>
            </div>
        </div>
        <!-- footer -->
        <%= yield %>

    </body>
</html>
